<template>
  <el-form label-width="100px">
    <el-form-item label="SKU名称">
      <el-input v-model="skuParams.skuName" placeholder="SKU名称"></el-input>
    </el-form-item>
    <el-form-item label="价格(元)">
      <el-input v-model="skuParams.price" type="number" placeholder="价格(元)"></el-input>
    </el-form-item>
    <el-form-item label="重量(克)">
      <el-input v-model="skuParams.weight" type="number" placeholder="重量(克)"></el-input>
    </el-form-item>
    <el-form-item label="SKU描述">
      <el-input v-model="skuParams.skuDesc" type="textarea" placeholder="SKU描述"></el-input>
    </el-form-item>
    <el-form-item label="平台属性">
      <el-form :inline="true">
        <el-form-item v-for="(item,index) in attrArr" :key="index" :label="item.attrName">
          <el-select v-model="item.attrIdAndValueId">
            <el-option v-for="(attrValue,attrIndex) in item.attrValueList" :key="attrIndex" 
              :label="attrValue.valueName" :value="`${item.id}:${attrValue.id}`"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="销售属性">
      <el-form :inline="true">
        <el-form-item v-for="(item,index) in saleArr" :key="index" :label="item.saleAttrName">
          <el-select v-model="item.saleIdAndValueId">
            <el-option v-for="(saleAttrValue,saleAttrIndex) in item.spuSaleAttrValueList" :key="saleAttrIndex" 
              :label="saleAttrValue.saleAttrValueName" :value="`${item.id}:${saleAttrValue.id}`"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-form-item>
    <el-form-item label="图片名称">
      <el-table border :data="imgArr" ref="table">
        <el-table-column type="selection" width="100px" align="center"></el-table-column>
        <el-table-column label="图片">
          <template #="{row}">
            <img :src="row.imgUrl" alt="" style="width: 100px;height: 100px;">
          </template>
        </el-table-column>
        <el-table-column label="名称" prop="imgName"></el-table-column>
        <el-table-column label="操作">
          <template #="{row}">
            <el-button type="warning" size="small" @click="handle(row)">设置默认</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import {reqAttr} from '@/api/product/attr/index'
import {reqSpuImageList,reqSpuHasSaleAttr,reqAddSku} from '@/api/product/spu/index'
import type { SkuData } from '@/api/product/spu/type';
import { ElMessage } from 'element-plus';
import { ref,reactive } from 'vue';
// 平台属性
let attrArr = ref<any>([])
// 销售属性
let saleArr = ref<any>([])
// 照片墙数据
let imgArr = ref<any>([])
// 获取table组件实例
let table = ref<any>([])
// 收集sku参数
let skuParams = reactive<SkuData>({
  // 父组件传递数据
  category3Id:"", //三级分类id
  spuId:"", //已有spuid
  tmId:"", //spu品牌id
  // 表单输入数据
  skuName:"", //sku名字
  price:"", //sku价格
  weight:"", //sku重量
  skuDesc:"", //sku描述
  skuAttrValueList:[], //平台属性
  skuSaleAttrValueList:[], //销售属性
  skuDefaultImg:"", //sku图片地址
})
// 自定义事件方法
let $emit = defineEmits(['changeScene'])
const cancel = ()=> {
  $emit('changeScene',{flag:0,params:''})
}
// 设置默认图片方法
const handle = (row:any) => {
  // 点击按钮时，全部复选框不勾选
  imgArr.value.forEach((item:any) => {
    table.value.toggleRowSelection(item,false)
  })
  // 只设置选中图片勾选
  table.value.toggleRowSelection(row,true)
  // 收集图片地址
  skuParams.skuDefaultImg = row.imgUrl
}
const save = async()=> {
  // 平台属性
  // reduce: prev起始值[]，next数组每项元素
  skuParams.skuAttrValueList = attrArr.value.reduce((prev:any,next:any) => {
    // 判断当前平台属性有没有attrIdAndValueId这个值
    if(next.attrIdAndValueId){
      let [attrId,valueId] = next.attrIdAndValueId.split(':') //切割为数组两个id解构赋值
      prev.push({attrId,valueId}) // 两个id组合为对象push到数组中
    }
    return prev // reduce接收最后一轮返回的数组
  },[])
  // 销售属性
  skuParams.skuSaleAttrValueList = saleArr.value.reduce((prev:any,next:any) => {
    // 判断当前平台属性有没有saleIdAndValueId这个值
    if(next.saleIdAndValueId){
      let [saleAttrId,saleAttrValueId] = next.saleIdAndValueId.split(':') //切割为数组两个id解构赋值
      prev.push({saleAttrId,saleAttrValueId}) // 两个id组合为对象push到数组中
    }
    return prev // reduce接收最后一轮返回的数组
  },[])
  // 添加sku请求
  let res:any = await reqAddSku(skuParams)
  if(res.code==200){
    ElMessage.success('添加成功！')
    // 通知父组件切换场景0
    $emit('changeScene',{flag:0,params:''})
  }else{
    ElMessage.error('添加失败！')
  }
}
// 当前子组件方法对外暴露
const initSkuData = async(c1Id:number|string,c2Id:number|string,spu:any)=> {
  // 收集数据
  skuParams.category3Id = spu.category3Id
  skuParams.spuId = spu.id
  skuParams.tmId = spu.tmId
  // 获取平台属性
  let res:any = await reqAttr(c1Id,c2Id,spu.category3Id)
  // 获取对应的销售属性
  let res2:any = await reqSpuHasSaleAttr(spu.id)
  // 获取照片墙的数据
  let res3:any = await reqSpuImageList(spu.id)
  attrArr.value = res.data
  saleArr.value = res2.data
  imgArr.value = res3.data
}
// 对外暴露方法
defineExpose({initSkuData})
</script>

<style scoped lang="scss">

</style>